<template>
  <div class="course-management">
    <!-- 顶部导航栏 -->
    <el-header class="header">
      <div class="header-left">
        <el-icon class="logo-icon"><School /></el-icon>
        <span class="system-title">在线直播教育APP</span>
      </div>
      <div class="header-right">
        <span class="welcome-text">欢迎，admin</span>
        <el-dropdown>
          <span class="user-dropdown">
            <el-icon><User /></el-icon>
            <el-icon><ArrowDown /></el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>个人中心</el-dropdown-item>
              <el-dropdown-item divided @click="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </el-header>

    <el-container class="main-container">
      <!-- 左侧导航栏 -->
      <el-aside class="sidebar" width="240px">
        <el-menu
          default-active="course-management"
          class="sidebar-menu"
          background-color="#304156"
          text-color="#bfcbd9"
          active-text-color="#409EFF"
        >
          <el-menu-item index="dashboard" @click="navigateTo('/dashboard')">
            <el-icon><House /></el-icon>
            <span>系统首页</span>
          </el-menu-item>
          
          <el-sub-menu index="user">
            <template #title>
              <el-icon><User /></el-icon>
              <span>用户管理</span>
            </template>
            <el-menu-item index="student-management" @click="navigateTo('/student-management')">学生管理</el-menu-item>
            <el-menu-item index="teacher-management" @click="navigateTo('/teacher-management')">教师管理</el-menu-item>
          </el-sub-menu>

          <el-menu-item index="category-management" @click="navigateTo('/category-management')">
            <el-icon><Grid /></el-icon>
            <span>分类管理</span>
          </el-menu-item>

          <el-sub-menu index="course">
            <template #title>
              <el-icon><Reading /></el-icon>
              <span>课程管理</span>
            </template>
            <el-menu-item index="course-management" class="active-menu">课程管理</el-menu-item>
          </el-sub-menu>

          <el-sub-menu index="order">
            <template #title>
              <el-icon><ShoppingCart /></el-icon>
              <span>订单管理</span>
            </template>
            <el-menu-item index="order-list">订单管理</el-menu-item>
          </el-sub-menu>

          <el-sub-menu index="article">
            <template #title>
              <el-icon><Document /></el-icon>
              <span>文章管理</span>
            </template>
            <el-menu-item index="article-list">文章管理</el-menu-item>
          </el-sub-menu>

          <el-sub-menu index="finance">
            <template #title>
              <el-icon><Money /></el-icon>
              <span>收入管理</span>
            </template>
            <el-menu-item index="finance-record">收入管理</el-menu-item>
          </el-sub-menu>
        </el-menu>
      </el-aside>

      <!-- 主要内容区域 -->
      <el-main class="main-content">
        <!-- 面包屑导航 -->
        <el-breadcrumb class="breadcrumb" separator="/">
          <el-breadcrumb-item @click="navigateTo('/dashboard')">系统首页</el-breadcrumb-item>
          <el-breadcrumb-item class="active">课程管理</el-breadcrumb-item>
        </el-breadcrumb>

        <!-- 搜索筛选区域 -->
        <div class="search-section">
          <el-form :inline="true" :model="searchForm" class="search-form">
            <el-form-item label="课程名称搜索">
              <el-input
                v-model="searchForm.courseName"
                placeholder="请输入课程名称"
                clearable
                style="width: 200px"
              />
            </el-form-item>
            <el-form-item label="课程状态">
              <el-select
                v-model="searchForm.courseStatus"
                placeholder="请选择课程状态"
                clearable
                style="width: 150px"
              >
                <el-option label="未开课" value="未开课" />
                <el-option label="已开课" value="已开课" />
                <el-option label="已结课" value="已结课" />
              </el-select>
            </el-form-item>
            <el-form-item label="一级分类">
              <el-select
                v-model="searchForm.firstCategory"
                placeholder="请选择一级分类"
                clearable
                style="width: 150px"
              >
                <el-option label="高中" value="高中" />
                <el-option label="初中" value="初中" />
                <el-option label="小学" value="小学" />
              </el-select>
            </el-form-item>
            <el-form-item label="二级分类">
              <el-select
                v-model="searchForm.secondCategory"
                placeholder="请选择二级分类"
                clearable
                style="width: 150px"
              >
                <el-option label="语文" value="语文" />
                <el-option label="数学" value="数学" />
                <el-option label="英语" value="英语" />
              </el-select>
            </el-form-item>
            <el-form-item label="创建时间筛选">
              <el-date-picker
                v-model="searchForm.createTime"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                style="width: 240px"
              />
            </el-form-item>
            <el-form-item label="更新时间筛选">
              <el-date-picker
                v-model="searchForm.updateTime"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                style="width: 240px"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleSearch">
                <el-icon><Search /></el-icon>
                搜索
              </el-button>
            </el-form-item>
            <el-form-item>
              <el-button type="success" @click="addCourse">
                <el-icon><Plus /></el-icon>
                新增
              </el-button>
            </el-form-item>
          </el-form>
        </div>

        <!-- 数据表格 -->
        <div class="table-section">
          <el-table
            :data="courseList"
            style="width: 100%"
            v-loading="loading"
            stripe
            border
            :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
          >
            <el-table-column prop="id" label="序号" width="80" align="center" />
            <el-table-column prop="courseName" label="课程名称" width="200" show-overflow-tooltip />
            <el-table-column prop="firstCategory" label="一级分类" width="100" align="center" />
            <el-table-column prop="secondCategory" label="二级分类" width="100" align="center" />
            <el-table-column label="预览图" width="100" align="center">
              <template #default="scope">
                <el-icon v-if="!scope.row.previewImage" size="24"><Picture /></el-icon>
                <el-image
                  v-else
                  :src="scope.row.previewImage"
                  style="width: 40px; height: 30px"
                  fit="cover"
                />
              </template>
            </el-table-column>
            <el-table-column label="Banner" width="100" align="center">
              <template #default="scope">
                <el-icon v-if="!scope.row.banner" size="24"><Picture /></el-icon>
                <el-image
                  v-else
                  :src="scope.row.banner"
                  style="width: 40px; height: 30px"
                  fit="cover"
                />
              </template>
            </el-table-column>
            <el-table-column prop="teacher" label="老师" width="100" align="center" />
            <el-table-column prop="grade" label="年级" width="100" align="center" />
            <el-table-column prop="price" label="价格" width="100" align="center">
              <template #default="scope">
                <span class="price-text">{{ scope.row.price }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="courseHours" label="课时" width="80" align="center" />
            <el-table-column label="展示状态" width="100" align="center">
              <template #default="scope">
                <el-tag :type="scope.row.displayStatus === '未开课' ? 'warning' : scope.row.displayStatus === '已开课' ? 'success' : 'info'">
                  {{ scope.row.displayStatus }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="课程状态" width="100" align="center">
              <template #default="scope">
                <el-tag :type="scope.row.courseStatus === '未开课' ? 'warning' : scope.row.courseStatus === '已开课' ? 'success' : 'info'">
                  {{ scope.row.courseStatus }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="courseDirectory" label="课程目录" width="120" align="center" />
            <el-table-column prop="createTime" label="创建时间" width="160" align="center" />
            <el-table-column prop="updateTime" label="更新时间" width="160" align="center" />
            <el-table-column label="操作" width="120" align="center" fixed="right">
              <template #default="scope">
                <el-button type="primary" size="small" @click="editCourse(scope.row)">
                  修改
                </el-button>
                <el-button type="text" size="small" @click="viewDetails(scope.row)">
                  下架
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <!-- 分页 -->
        <div class="pagination-section">
          <div class="pagination-info">
            显示第1-6条结果，共34条
          </div>
          <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[5, 10, 20, 50]"
            :total="total"
            layout="sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>

        <!-- 底部版权信息 -->
        <div class="footer">
          <p>Copyright © Assistants, All Rights Reserved.</p>
          <p>Email：1195193361@qq.com WeChat: zz1195193361</p>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  User,
  ArrowDown,
  House,
  Reading,
  ShoppingCart,
  Money,
  Search,
  Plus,
  Grid,
  School,
  Document,
  Picture
} from '@element-plus/icons-vue'

const router = useRouter()

// 响应式数据
const loading = ref(false)
const currentPage = ref(1)
const pageSize = ref(5)
const total = ref(34)

// 搜索表单
const searchForm = reactive({
  courseName: '',
  courseStatus: '',
  firstCategory: '',
  secondCategory: '',
  createTime: '',
  updateTime: ''
})

// 课程列表数据
const courseList = ref([
  {
    id: 1,
    courseName: '高中数学第三角形+角平分线定理点线',
    firstCategory: '高中',
    secondCategory: '语文',
    previewImage: '',
    banner: '',
    teacher: '杨老师',
    grade: '高一',
    price: '128',
    courseHours: '按天',
    displayStatus: '未开课',
    courseStatus: '未开课',
    courseDirectory: '查看详情',
    createTime: '2019-07-17 10:10:07',
    updateTime: '2019-07-17 10:10:07'
  },
  {
    id: 2,
    courseName: '高中数学第三角形+角平分线定理点线',
    firstCategory: '高中',
    secondCategory: '语文',
    previewImage: '',
    banner: '',
    teacher: '江老师',
    grade: '高一',
    price: '128',
    courseHours: '按天',
    displayStatus: '已开课',
    courseStatus: '已开课',
    courseDirectory: '查看详情',
    createTime: '2019-07-17 10:10:07',
    updateTime: '2019-07-17 10:10:07'
  },
  {
    id: 3,
    courseName: '高中数学第三角形+角平分线定理点线',
    firstCategory: '高中',
    secondCategory: '语文',
    previewImage: '',
    banner: '',
    teacher: '李老师',
    grade: '高一',
    price: '128',
    courseHours: '按天',
    displayStatus: '已结课',
    courseStatus: '已结课',
    courseDirectory: '查看详情',
    createTime: '2019-07-17 10:10:07',
    updateTime: '2019-07-17 10:10:07'
  },
  {
    id: 4,
    courseName: '高中数学第三角形+角平分线定理点线',
    firstCategory: '高中',
    secondCategory: '语文',
    previewImage: '',
    banner: '',
    teacher: '杨老师',
    grade: '高一',
    price: '128',
    courseHours: '按月',
    displayStatus: '未开课',
    courseStatus: '未开课',
    courseDirectory: '查看详情',
    createTime: '2019-07-17 10:10:07',
    updateTime: '2019-07-17 10:10:07'
  },
  {
    id: 5,
    courseName: '高中数学第三角形+角平分线定理点线',
    firstCategory: '高中',
    secondCategory: '语文',
    previewImage: '',
    banner: '',
    teacher: '江老师',
    grade: '高一',
    price: '128',
    courseHours: '按月',
    displayStatus: '已开课',
    courseStatus: '已开课',
    courseDirectory: '查看详情',
    createTime: '2019-07-17 10:10:07',
    updateTime: '2019-07-17 10:10:07'
  },
  {
    id: 6,
    courseName: '高中数学第三角形+角平分线定理点线',
    firstCategory: '高中',
    secondCategory: '语文',
    previewImage: '',
    banner: '',
    teacher: '李老师',
    grade: '高一',
    price: '128',
    courseHours: '按月',
    displayStatus: '已结课',
    courseStatus: '已结课',
    courseDirectory: '查看详情',
    createTime: '2019-07-17 10:10:07',
    updateTime: '2019-07-17 10:10:07'
  }
])

// 导航跳转
const navigateTo = (path) => {
  router.push(path)
}

// 退出登录
const logout = () => {
  ElMessage.success('退出登录成功')
  router.push('/')
}

// 搜索功能
const handleSearch = () => {
  loading.value = true
  // 模拟搜索请求
  setTimeout(() => {
    loading.value = false
    ElMessage.success('搜索完成')
  }, 1000)
}

// 新增课程
const addCourse = () => {
  ElMessage.info('打开新增课程对话框')
}

// 编辑课程
const editCourse = (row) => {
  ElMessage.info(`编辑课程：${row.courseName}`)
}

// 查看详情/下架
const viewDetails = (row) => {
  ElMessageBox.confirm(
    `确定要下架课程 ${row.courseName} 吗？`,
    '确认下架',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(() => {
    ElMessage.success('下架成功')
  }).catch(() => {
    ElMessage.info('已取消下架')
  })
}

// 分页处理
const handleSizeChange = (val) => {
  pageSize.value = val
  loadCourseList()
}

const handleCurrentChange = (val) => {
  currentPage.value = val
  loadCourseList()
}

// 加载课程列表
const loadCourseList = () => {
  loading.value = true
  // 模拟API请求
  setTimeout(() => {
    loading.value = false
  }, 500)
}

// 组件挂载时加载数据
onMounted(() => {
  loadCourseList()
})
</script>

<style scoped>
.course-management {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

/* 顶部导航栏 */
.header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  height: 60px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo-icon {
  font-size: 24px;
}

.system-title {
  font-size: 18px;
  font-weight: 600;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 15px;
}

.welcome-text {
  font-size: 14px;
}

.user-dropdown {
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  padding: 5px 10px;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.user-dropdown:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

/* 主容器 */
.main-container {
  flex: 1;
  height: calc(100vh - 60px);
}

/* 侧边栏 */
.sidebar {
  background-color: #304156;
  box-shadow: 2px 0 6px rgba(0, 0, 0, 0.1);
}

.sidebar-menu {
  border: none;
  height: 100%;
}

.sidebar-menu .el-menu-item {
  height: 50px;
  line-height: 50px;
}

.sidebar-menu .el-sub-menu .el-menu-item {
  height: 45px;
  line-height: 45px;
  padding-left: 60px !important;
}

.active-menu {
  background-color: #409EFF !important;
  color: white !important;
}

/* 主要内容区域 */
.main-content {
  background: #f5f5f5;
  padding: 20px;
  overflow-y: auto;
}

.breadcrumb {
  margin-bottom: 20px;
  padding: 15px 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.breadcrumb .active {
  color: #409eff;
  font-weight: 600;
}

/* 搜索区域 */
.search-section {
  margin-bottom: 20px;
  padding: 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.search-form {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.search-form .el-form-item {
  margin-bottom: 15px;
}

/* 表格区域 */
.table-section {
  margin-bottom: 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.price-text {
  color: #f56c6c;
  font-weight: 600;
}

/* 分页区域 */
.pagination-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.pagination-info {
  color: #666;
  font-size: 14px;
}

/* 底部版权信息 */
.footer {
  margin-top: 40px;
  text-align: center;
  color: #999;
  font-size: 12px;
  line-height: 1.5;
}

.footer p {
  margin: 5px 0;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .search-form {
    flex-direction: column;
  }
  
  .search-form .el-form-item {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .header {
    padding: 0 10px;
  }
  
  .header-left .system-title {
    display: none;
  }
  
  .main-content {
    padding: 10px;
  }
  
  .pagination-section {
    flex-direction: column;
    gap: 15px;
  }
}
</style>